import Searcher from '@/components/Searcher'
import Theme from '@/components/Theme'
import Weather from '@/components/Weather'

import useDarkMode from '@/hooks/useDarkMode'
import { util } from '@/utils'
import { useState } from 'react'

function App() {
  console.log('--- App ---')

  const { city: defaultCity } = util.Setting.getSetting()
  const [city, setCity] = useState<string | null>(defaultCity)
  const handleSubmit = (value: string) => setCity(value)

  const { isDarkMode, toggle } = useDarkMode()
  const bgColor = isDarkMode ? 'bg-gray-900' : 'bg-white'

  return (
    <>
      <header className="py-4">
        <div className="container flex justify-between items-center">
          <h2 className="flex justify-center items-center text-2xl font-bold">{util.Setting.AppName}</h2>

          {/* 切换模式胶囊 */}
          <Theme mode={isDarkMode} onClick={toggle} />
        </div>
      </header>

      <div className="container">
        {/* 搜索组件 */}
        <Searcher className={bgColor} onSubmit={handleSubmit} />

        {/* 天气数据展示组件 */}
        <Weather city={city} className={bgColor} />
      </div>
    </>
  )
}

export default App
